<script setup>
import son from "./Son.vue";
import { ref } from "vue";

let passValue = ref("");
let sonvalue = ref("");
// 元素的引用
let refDom = ref("");
// 通过ref引用拿到input元素 将input输入的值传给子组件的props上
const giveToSon = () => {
  passValue.value = refDom.value.value;
  // console.log(refDom.value.value);
};

// 子组件会触发getValue事件然后父组件执行对应回调函数Value
const Value = (e) => {
  sonvalue.value = e;
};
</script>
<template>
  <h1 class="imp">子组件</h1>
  <!-- 把父组件的响应式数据passValue作为props传给子组件son -->
  <!-- 子组件会触发getValue事件然后父组件执行对应回调函数Value -->
  <son :msg="passValue" @getValue="Value"></son>
  <hr />
  <h1 class="imp">父组件</h1>
  <h2>从子组件得到的值 - {{ sonvalue }}</h2>
  <span class="tips">输入想要给子组件的data - </span>
  <input type="text" ref="refDom" />
  <button @click="giveToSon">传给子组件</button>

  <!-- 元素绑定方法要传参就如下方式传参 -->
  <!-- <button @click="giveToSon('alg')">传给子组件</button> -->
</template>
<style scoped>
.imp {
  color: red;
}
.tips {
  font-size: 18;
  font-weight: 600;
}
button {
  margin-left: 20px;
  height: 30px;
  width: 120px;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
}
</style>
